<template>
  <div class="app-container org">
    <el-card class="leftCard">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="未登记" name="first">
          <register v-if="activeName == 'first'" @clickAdd="clickAdd" @echo="echo" @getStatus="getStatus" ref="queryRef"
            :queryContractId="route.query.contractId" :contractId="form.contractId" :status="0" />
        </el-tab-pane>
        <el-tab-pane label="已登记" name="second" v-if="!route.query.contractId">
          <register v-if="activeName == 'second'" @clickAdd="clickAdd" @echo="echo" @getStatus="getStatus"
            @revokeGotoFirst="revokeGotoFirst" ref="queryRef" :queryContractId="route.query.contractId"
            :contractId="form.contractId" :isShow="isShow" :status="1" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card class="rightCard">
      <!-- 基础信息 -->
      <el-tabs v-model="rightActiveName" @tab-change="clickBusiness">
        <el-tab-pane label="基本信息" name="first">
          <information ref="inFormRef" @clickAdd="clickAdd" :echo="id" :taskId="route.query.taskId" @renovate="renovate"
            :isShow="isShow" :status="activeName == 'first' ? 0 : 1" />
        </el-tab-pane>
        <el-tab-pane label="业务信息" name="second" :disabled="!form.contractId">
          <business v-if="rightActiveName == 'second'" ref="businessRef" :zjId="form.contractId" :status="status"
            :isDisabled="isDisabled" />
        </el-tab-pane>
        <!-- <el-tab-pane label="财务信息" name="thrtd" :disabled="true">
          <div v-if="rightActiveName == 'thrtd'"></div>
        </el-tab-pane> -->
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup name="Check">
import register from "./register";
import information from "./information";
import business from "./business";
import {
  getShow,
} from "@/api/contract/check";
import { nextTick } from "vue";
const route = useRoute()
const activeName = ref("first");
const rightActiveName = ref("first");
const inFormRef = ref(null);
const queryRef = ref(null);
const businessRef = ref(null);
const form = ref({});
const status = ref(0);
const id = ref();
const isShow = ref(0)
watch(
  () => activeName.value,
  (newVal) => {
    delete form.value.contractId;
  }
);
watch(
  () => status.value,
  (newVal) => {
    if(newVal == 0){
      if(activeName.value != 'first'){
        activeName.value = 'first';
      }
    }
  }
);
getShow().then(res => {
  isShow.value = res.data.flag
})
function clickAdd(val) {
  rightActiveName.value = "first";
  nextTick(() => {
    form.value.contractId = "";
    id.value = "";
    inFormRef.value.reset();
  });
}

function echo(val,copy) {
  id.value = val;
  form.value.contractId = val;
  rightActiveName.value = "first";
  if (val !== "") {
    inFormRef.value.echo(copy);
  }
}

function renovate(val) {
  form.value.contractId = val;
  id.value = val;
  queryRef.value.handleQuery();
}

function getStatus(val) {
  status.value = val
}

//执行撤回操作回到未登记页面
function revokeGotoFirst(val) {
  getStatus(val);
  activeName.value = "first";
}

const isDisabled = ref(true)

function clickBusiness(tabs) {
  isDisabled.value = true
  if (tabs == "first") {
    nextTick(() => {
      if (id.value !== "") {
        inFormRef.value.echo();
      }
    });
  }
  if (tabs == "second") {
    rightActiveName.value = "second";
    if (activeName.value != 'first') {
      nextTick(function () {
        isDisabled.value = false
        businessRef.value.assignmentId();
      });
      return;
    }
    inFormRef.value
      .submit(true)
      .then((res) => {
        nextTick(function () {
          isDisabled.value = false
          businessRef.value.assignmentId();
        });
      })
      .catch((res) => {
        id.value = "";
        isDisabled.value = true
        rightActiveName.value = "first";
      });
  }
}

</script>
